<template>
    <div class="box">
        <div class="card mt-4">
            <div class="card-body">
                <form>
                    <div class="mb-3">
                        <label class="form-label">产品名称</label>
                        <input type="text" class="form-control" v-model="newGood.goodName">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">产品数量</label>
                        <input type="number" class="form-control" v-model="newGood.goodNums">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">产品单价</label>
                        <input type="number" class="form-control" v-model="newGood.goodPrice">
                    </div>
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-primary" @click="addNewGood()">添加</button>
                    </div>
                </form>
            </div>
        </div>
        <table class="table table-bordered mt-4">
            <thead class="table-dark">
                <tr>
                    <th>
                        <input type="checkbox" v-model="all">
                    </th>
                    <th>编号</th>
                    <th>产品名称</th>
                    <th>产品单价</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for=" (good, i) in goods" :key="good.goodId">
                    <td>
                        <input type="checkbox" v-model="good.state">
                    </td>
                    <td>{{ i + 1 }}</td>
                    <td>{{ good.goodName }}</td>
                    <td>{{ good.goodPrice }}</td>
                    <td>
                        <div class="input-group input-group-sm num-ground">
                            <!-- <button class="btn btn-outline-secondary" type="button" @click="subGoodNums(i)">-</button> -->
                            <button class="btn btn-outline-secondary" type="button"
                                @click="subGoodNums2(i, good)">-</button>
                            <input type="text" class="form-control" readonly :value="good.goodNums">
                            <button class="btn btn-outline-secondary" type="button" @click="good.goodNums++">+</button>
                        </div>
                    </td>
                    <td>
                        <button type="button" class="btn btn-danger btn-sm"
                            @click="removeGood(i, good.goodName)">删除</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        总计
                    </td>
                    <td colspan="3">
                        被选中<span style="color:red;">{{ count.count }}</span>,
                        总计<span style="color:red;">{{ count.sum }}</span>元
                    </td>
                    <td>
                        <button type="button" class="btn btn-danger btn-sm" @click="removeChooseGood()">删除选择项</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup>
// vue的文件解析时，对组合式api会自动完成模块的识别
import Mock from "mockjs";
import { computed, ref } from "vue";

let newGood = ref({
    goodName: "",
    goodPrice: 0,
    goodNums: 0,
    state: false
});

let goods = ref(Mock.mock({
    "list|4": [
        {
            goodId: "@id",
            goodName: "@cword(5)",
            goodPrice: "@float(60, 100, 2, 2)",
            goodNums: "@integer(1, 10)",
            state: false
        }
    ]
}).list);

let all = computed({
    get() {
        return goods.value.length == 0 ? false : goods.value.every(g => g.state);
    },
    set(nv) {
        goods.value.forEach(p => p.state = nv);
    }
})

let count = computed(function () {
    let result = {
        count: 0,
        sum: 0
    }
    for (let i = 0; i < goods.value.length; i++) {
        if (goods.value[i].state) {
            result.count++;
            result.sum += goods.value[i].goodPrice * goods.value[i].goodNums
        }
    }
    return result;
})

const addNewGood = function() {
    newGood.value.goodId = Mock.mock("@id");
    goods.value.push(newGood.value);
    newGood.value = {
        goodName: "",
        goodPrice: 0,
        goodNums: 0,
        state: false
    };
}

const removeGood = function(i, name) {
    let flag = confirm(`是否删除“${name}”商品`)
    if (flag) {
        goods.value.splice(i, 1)
    }
}

const subGoodNums2 = function(i, good) {
    let tempNum = good.goodNums - 1;
    if (tempNum <= 0) {
        removeGood(i, good.goodName)
    } else {
        good.goodNums--;
    }
}

const removeChooseGood = function() {
    goods.value = goods.value.filter(p => !p.state)
}
</script>

<style lang="scss" scoped>
.box {
    margin: 0 auto;
    width: 800px;
}

.card {
    width: 400px;
    background-color: #dedede;
    margin: 0 auto;
}

.table td,
table th {
    vertical-align: middle;
    text-align: center;
}

.num-ground {
    width: 160px;
    margin: 0 auto;
}

.num-ground input[type="text"] {
    text-align: center;
}
</style>